<template>
    <el-dialog title="事务总览" :visible.sync="isShow" v-if="isShow" top="8vh" width="700px" :close-on-click-modal="false">
        <div class="txl border" style="height: 70vh; display: flex">
            <div class="border" style="width: 150px; padding: 10px">
                <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
                    <div style="height: 100%; padding: 0 10px; overflow-y: auto">
                        <div :class="select === item ? 'active text cursor' : 'text cursor'" @click="change(item)" v-for="item in ['全部事务', '工单处理', '工单审核']" :key="item">
                            {{ item }}
                        </div>
                    </div>
                </el-tabs>
            </div>
            <div style="flex: 1; height: 100%">
                <div class="border" style="padding-left: 3%; height: 50px; line-height: 50px; font-size: 16px; color: #88e8f2; display: flex; justify-content: space-between; align-items: end">
                    <div>{{ select }}</div>
                    <el-checkbox style="color: #88e8f2; margin-right: 10px" v-model="checked">只看待办</el-checkbox>
                </div>
                <div style="height: calc(100% - 62px); overflow-y: auto">
                    <div style="margin: 15px; border-bottom: 1px solid rgba(73, 197, 251, 0.3)" v-for="item in f" :key="item.id">
                        <div style="height: 24px; line-height: 24px; display: flex; justify-content: space-between" class="text">
                            <div style="margin-right: 20px">{{ item.content }}——{{ item.source }}</div>
                            <div>{{ item.time }}</div>
                        </div>
                        <div style="height: 24px; line-height: 24px; margin-bottom: 4px; margin-top: 2px; display: flex; justify-content: space-between" class="text">
                            <div>{{ item.label }}——{{ item.number }}号工单</div>
                            <div style="display: flex">
                                <div v-if="!item.stage" style="margin-right: 30px" class="pointer" @click="ignore(item)">忽略</div>
                                <div class="pointer" @click="handlexj(item)">{{ item.stage ? item.stage : item.type === '工单处理' ? '去处理' : '去审核' }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
import { requestApi } from '@/requset/api'
export default {
    components: {},
    data() {
        return {
            isShow: false,
            select: '全部事务',
            affairList: [],
            checked: false,
        }
    },
    methods: {
        doOpen() {
            this.select = '全部事务'
            this.isShow = true
            this.getlist()
        },
        change(item) {
            this.select = item
            this.getlist()
        },
        getlist() {
            requestApi('post', 'mqtt/affair', { name: sessionStorage.getItem('nick_name'), type: this.select }).then((res) => {
                this.affairList = res.data.data.map((item) => {
                    item.label = this.menuType.find((i) => i.name === item.menu).label
                    return item
                })
            })
        },
        handlexj(item) {
            this.isShow = false

            if (this.$route.name === item.menu) {
                this.$message({
                    type: 'error',
                    message: '已在当前页面,不可重复跳转!',
                })
            } else {
                this.$router.push(`/index/${item.menu}?id=${item.number}`)
            }
        },
        ignore(item) {
            requestApi('post', 'mqtt/ignore', item).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '忽略成功',
                    })
                    this.$EventBus.$emit('undatexj')
                    this.getlist()
                }
            })
        },
    },
    computed: {
        ...mapState('backstage', ['menuType']),
        f() {
            return this.checked ? this.affairList.filter((item) => !item.stage) : this.affairList
        },
    },
    created() {},
}
</script>

<style lang="less">
.border {
    border: 1px solid rgba(73, 197, 251, 0.3);
    border-radius: 2px;
    overflow-x: auto;
}
.txl {
    .active {
        color: #409eff !important;
    }
    .text {
        height: 34px;
        line-height: 34px;
        font-size: 16px;
        color: #b2e3ff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .el-tabs__item {
        background-color: #0a3273;
        background-image: none !important;
        height: 36px;
        line-height: 36px;
        width: 100px;
        color: #007bff;
        font-size: 13px !important;
    }

    .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
        color: white !important;
        background-color: #007bff !important;
    }

    .eidtItem {
        width: 80%;
        margin-left: 10%;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        position: relative;

        .el-input {
            width: 40%;
        }

        i {
            font-size: 30px;
            color: aqua;
            position: absolute;

            cursor: pointer;
        }

        .el-icon-plus {
            right: -32px;
            top: 4px;
        }

        .el-icon-minus {
            left: -32px;
            top: 4px;
        }
    }
}
</style>
